<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/repeat.css">
    <link rel="stylesheet" href="../css/list.css">
    <link rel="stylesheet" href="../img/iconfont/iconfont.css">
    <script src="../js/list.js" type="module"></script>
    <title>购物车</title>
</head>
<body>
    <!-- 购物车顶部 -->
    <header>
        <div class="warpper">
            <h2 class="title">
                <img src="../img/logo-mi2.png" alt="">
                <p>我的购物车<span>温馨提示：产品是否购买成功，以最终结算为准哦，请尽快结算</span></p>
            </h2>
            <ul class="user">
                <li>
                    <a href="">我的昵称<span class="iconfont icon-gouwuchekong"></span></a>
                    <ul class="sub_user">
                        <li><a href="">个人中心</a></li>
                        <li><a href="">评价晒单</a></li>
                        <li><a href="">我的喜欢</a></li>
                        <li><a href="">小米账户</a></li>
                        <li><a href="">退出登录</a></li>
                    </ul>
                </li>
                <i>|</i><li><a href="">我的订单</a></li>
            </ul>
        </div>
    </header>

    <!-- 购物车（空） -->
    <div class="empty_list none">
        <div class="warpper">
            <div class="empty_pic">
                <img src="../img/cart-empty.png" alt="" srcset="">
            </div>
            <div class="empty_txt">
                <h2>您的购物车还是空的!</h2>
                <p><a href="../html/index.html">马上去购物</a></p>
            </div>
        </div>
    </div>

    <!-- 购物车 -->
    <div class="list_container none">
        <ul id="list">
            <li class="list_title warpper">
                <p class="check"><input type="checkbox" name="" id="">全选</p>
                <p class="screenshot"><img src="" alt=""></p>
                <p class="products">商品名称</p>
                <p class="products_prices">单价</p>
                <p class="products_count">数量</p>
                <p class="products_subtotal">小计</p>
                <p class="products_remove">操作</p>
            </li>
            <!-- <li class="warpper"> -->
                <!-- <p class="check"><input type="checkbox" name="" id=""></p> -->
                <!-- <p class="screenshot"><img src="../img/xiaomi01.png" alt=""></p> -->
                <!-- <p class="products">米巨能写多彩中性笔</p> -->
                <!-- <p class="products_prices">9.99元</p> -->
                <!-- <p class="products_count"><a href="">-</a><input type="text" name="" id="" value="1"><a href="">+</a></p> -->
                <!-- <p class="products_subtotal">9.99元</p> -->
                <!-- <p class="products_remove"><a href="">×</a></p> -->
            <!-- </li> -->
            <!-- <li class="warpper"> -->
                <!-- <p class="check"><input type="checkbox" name="" id=""></p> -->
                <!-- <p class="screenshot"><img src="../img/xiaomi01.png" alt=""></p> -->
                <!-- <p class="products">米家天然乳胶护颈枕</p> -->
                <!-- <p class="products_prices">159元</p> -->
                <!-- <p class="products_count"><a href="">-</a><input type="text" name="" id="" value="1"><a href="">+</a></p> -->
                <!-- <p class="products_subtotal">159元</p> -->
                <!-- <p class="products_remove"><a href="">×</a></p> -->
            <!-- </li> -->
        </ul>
    </div>

    <!-- 结算 -->
    <div class="settlement_list warpper none">
        <div class="warpper">
            <p class="settlement_left">
                <a href="../html/index.html">继续购物</a><i>|</i>
                <span>共<em>11</em>件商品，已选择<em>6</em>件</span>
            </p>
            <div class="settlement_right">
                <p>合计：<em id="total">2631</em>元</p>
                <button id="settlement">去结算</button>
            </div>
        </div>
    </div>

    <!-- 推荐商品 -->
    <div id="products_more">
        <div class="warpper">
            <h2>购买购物车中商品的人还买了</h2>
            <ul class="screenshot">
                <li>
                    <img src="../img/xiaomi01.png" alt="">
                    <p class="products_name">小米 Ultra</p>
                    <p class="products_prices">5499元</p>
                    <p class="products_description">6.5万人好评</p>
                    <button>加入购物车</button>
                </li>
                <li>
                    <img src="../img/xiaomi01.png" alt="">
                    <p class="products_name">小米 Ultra</p>
                    <p class="products_prices">5499元</p>
                    <p class="products_description">6.5万人好评</p>
                    <button>加入购物车</button>
                </li>
                <li>
                    <img src="../img/xiaomi01.png" alt="">
                    <p class="products_name">小米 Ultra</p>
                    <p class="products_prices">5499元</p>
                    <p class="products_description">6.5万人好评</p>
                    <button>加入购物车</button>
                </li>
                <li>
                    <img src="../img/xiaomi01.png" alt="">
                    <p class="products_name">小米 Ultra</p>
                    <p class="products_prices">5499元</p>
                    <p class="products_description">6.5万人好评</p>
                    <button>加入购物车</button>
                </li>
                <li>
                    <img src="../img/xiaomi01.png" alt="">
                    <p class="products_name">小米 Ultra</p>
                    <p class="products_prices">5499元</p>
                    <p class="products_description">6.5万人好评</p>
                    <button>加入购物车</button>
                </li>
                <li>
                    <img src="../img/xiaomi01.png" alt="">
                    <p class="products_name">小米 Ultra</p>
                    <p class="products_prices">5499元</p>
                    <p class="products_description">6.5万人好评</p>
                    <button>加入购物车</button>
                </li>
                <li>
                    <img src="../img/xiaomi01.png" alt="">
                    <p class="products_name">小米 Ultra</p>
                    <p class="products_prices">5499元</p>
                    <p class="products_description">6.5万人好评</p>
                    <button>加入购物车</button>
                </li>
                <li>
                    <img src="../img/xiaomi01.png" alt="">
                    <p class="products_name">小米 Ultra</p>
                    <p class="products_prices">5499元</p>
                    <p class="products_description">6.5万人好评</p>
                    <button>加入购物车</button>
                </li>
                <li>
                    <img src="../img/xiaomi01.png" alt="">
                    <p class="products_name">小米 Ultra</p>
                    <p class="products_prices">5499元</p>
                    <p class="products_description">6.5万人好评</p>
                    <button>加入购物车</button>
                </li>
                <li>
                    <img src="../img/xiaomi01.png" alt="">
                    <p class="products_name">小米 Ultra</p>
                    <p class="products_prices">5499元</p>
                    <p class="products_description">6.5万人好评</p>
                    <button>加入购物车</button>
                </li>
            </ul>
        </div>
    </div>
    <!-- 尾部 -->
    <footer>
        <div class="footer_top warpper">
            <ul id="service">
                <li><a href=""><span class="iconfont icon-gouwuchekong"></span><span>预约维修服务</span></a></li>
                <li><a href=""><span class="iconfont icon-gouwuchekong"></span><span>7天无理由退货</span></a></li>
                <li><a href=""><span class="iconfont icon-gouwuchekong"></span><span>15天免费换货</span></a></li>
                <li><a href=""><span class="iconfont icon-gouwuchekong"></span><span>满69包邮</span></a></li>
                <li><a href=""><span class="iconfont icon-gouwuchekong"></span><span>520余家售后网点</span></a></li>
            </ul>
            <div id="more">
                <ul class="link">
                    <li>
                        <h4>帮助中心</h4>
                        <a href="">账户管理</a>
                        <a href="">购物指南</a>
                        <a href="">订单操作</a>
                    </li>
                    <li>
                        <h4>服务支持</h4>
                        <a href="">售后政策</a>
                        <a href="">自助服务</a>
                        <a href="">相关下载</a>
                    </li>
                    <li>
                        <h4>线下门店</h4>
                        <a href="">小米之家</a>
                        <a href="">服务网点</a>
                        <a href="">授权体验店</a>
                    </li>
                    <li>
                        <h4>关于小米</h4>
                        <a href="">了解小米</a>
                        <a href="">加入小米</a>
                        <a href="">投资者关系</a>
                        <a href="">企业社会责任</a>
                        <a href="">廉洁举报</a>
                    </li>
                    <li>
                        <h4>关注我们</h4>
                        <a href="">新浪微博</a>
                        <a href="">官方微信</a>
                        <a href="">联系我们</a>
                        <a href="">公益基金会</a>
                    </li>
                    <li>
                        <h4>特色服务</h4>
                        <a href="">F码通道</a>
                        <a href="">礼物码</a>
                        <a href="">防伪查询</a>
                    </li>
                </ul>
                <div class="contact">
                    <h4>400-100-5678</h4>
                    <p>8:00-18:00（仅收市话费）</p>
                    <div class="manual_service">
                        <span class="iconfont icon-gouwuchekong"></span><span>人工服务</span>
                    </div>
                    <p>关注小米：<span class="iconfont icon-gouwuchekong"></span><span class="iconfont icon-gouwuchekong"></span></p>
                </div>
            </div>
        </div>
        <div class="footer_bottom">
            <div class="warpper">
                <img src="../img/logo-mi2.png" alt="" class="logo">
                <div class="information">
                    <ul class="Affiliation clear_fix">
                        <li><a href="">小米商城</a></li>
                        <li><a href="">MIUI</a></li>
                        <li><a href="">米家</a></li>
                        <li><a href="">米聊</a></li>
                        <li><a href="">多看</a></li>
                        <li><a href="">游戏</a></li>
                        <li><a href="">政企服务</a></li>
                        <li><a href="">小米天猫店</a></li>
                        <li><a href="">小米集团隐私政策</a></li>
                        <li><a href="">小米公司儿童信息保护规则</a></li>
                        <li><a href="">小米商城隐私政策</a></li>
                        <li><a href="">小米商城用户协议</a></li>
                        <li><a href="">问题反馈</a></li>
                        <li><a href="">Select Location</a></li>
                        <li><a href="">北京互联网法院法律服务工作站</a></li>
                        <li><a href="">中国消费者协会</a></li>
                        <li><a href="">北京市消费者协会</a></li>
                    </ul>
                    <div class="license">
                        <p>© <a href="">mi.com</a> 京ICP证110507号 <a href="">京ICP备10046444号</a> <a href="">京公网安备11010802020134号</a> <a href="">京网文[2020]0276-042号</a></p>
                        <p> <a href="">（京）网械平台备字（2018）第00005号</a> <a href="">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a> <a href="">营业执照</a> <a href="">医疗器械质量公告</a></p>
                        <p> <a href="">增值电信业务许可证</a>网络食品经营备案 京食药网食备202010048 <a href="">食品经营许可证</a></p>
                        <p>违法和不良信息举报电话：171-5104-4404 <a href="">知识产权侵权投诉</a>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
                        <p><a href=""><img src="../img/truste.png"></a><a href=""><img src="../img/truste.png"></a><a href=""><img src="../img/truste.png"></a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer_slogan"></div>
    </footer>
</body>
</html>